// Created by lifei on 2020/6/30--11:18.
<template>
    <div class="execution custom-checkbox">
        <basic-container>
            <avue-crud ref="crud"
                       :data="tableData"
                       :page.sync="page"
                       :option="tableOption"
                       :table-loading="tableLoading"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @on-load="getList"
                       @refresh-change="searchChange"
                       @size-change="sizeChange"
                       @search-change="searchChange"
                       @current-change="changePage"
                       @row-del="rowDel"
            >
            </avue-crud>
        </basic-container>
        <v-dialog
            title="编辑模板"
            :show.sync="dialogVisible"
            width="500px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="模板名称" prop="moduleName">
                    <el-input v-model="form.moduleName" placeholder="请输入模板名称"></el-input>
                </el-form-item>
                <el-form-item label="模板编码" prop="moduleCode">
                    <el-input v-model="form.moduleCode" placeholder="请输入模板编码"></el-input>
                </el-form-item>
                <el-form-item label="消息链接" prop="url">
                    <el-input v-model="form.url" placeholder="请输入消息链接"></el-input>
                </el-form-item>
                <el-form-item label="打开方式" prop="openType">
                    <el-input v-model="form.    openType" placeholder="请选择打开方式"></el-input>
                </el-form-item>
                <el-form-item label="消息模板" prop="template">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 8}" v-model="form.template" placeholder="请输入消息模板"></el-input>
                </el-form-item>
            </el-form>
            <span slot="foot">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </v-dialog>
    </div>
</template>

<script>
    import {fetchTemplateList, addTemplate, putTemplate, delTemplate} from '~/admin/api/message'
    import {tableOption} from '~/admin/const/message-template'

    export default {
        name: "index",
        data() {
            return {
                dialogVisible: false,
                info: {},
                uuid: '',
                qrcodeDialog: false,
                isShow: false,
                tableLoading: false,
                page: {
                    total: 1, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                href: '',
                tableOption: tableOption,
                tableData: [],
                pushChannel: [],
                form: {
                    moduleName: '',
                    moduleCode: '',
                    url: '',
                    openType: '',
                    template: '',
                }
            }
        },
        methods: {
            getList(page, params) {

                this.tableLoading = true

                fetchTemplateList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm)).then(response => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading = false
                })
            },
            handleUpdate: function (row, index, done, loading) {
                putTemplate(row).then(data => {
                    this.$message.success('修改成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading()
                })
            },
            handleSave: function (row, done, loading) {
                addTemplate(row).then(data => {
                    this.$message.success('添加成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading()
                })
            },
            rowDel: function (row, index) {
                this.$confirm('是否确认删除 ' + row.moduleName, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delTemplate(row.uuid)
                }).then(data => {
                    this.$message.success('删除成功')
                    this.getList(this.page)
                })
            },
            changePage(page) {
                console.log(page)
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize
            },
            resetList() {

            },
            searchChange(form, done) {
                this.searchForm = form
                this.getList(this.page, form)
                if (done) {
                    done()
                }
            },
            openModal(type) {
                if (type === 0) {
                    this.dialogVisible = true
                }
            },
        }
    }
</script>

<style scoped lang='scss'>
    

    .channels {

        .name {
            color: $theme-color;
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }

        .line {
            margin: 0 4px;
        }

    }
</style>
